/**
 * Banner菜单 banner页面
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Activity/activityList' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情页面</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 个人详情信息 -->
    <div class="personaldetails">
        <div class="personaldetails_text">
            <div class="personaldetails_text_detail">
                <el-avatar shape="circle" :size="200"  :src="bannerDetail.image"></el-avatar>
            </div>
            <div class="personaldetails_text_detail">活动序号：
                <span>{{bannerDetail.id}}</span>
            </div>
            <upload @changeImg="changeImg"></upload>
            <div class="personaldetails_text_detail">
                <el-avatar shape="circle" :size="200"  :src="bannerDetail.originator__portrait"></el-avatar>
            </div>
            <div class="personaldetails_text_detail">发起人昵称：
                <span>{{bannerDetail.originator__nickname}}</span>
            </div>
        </div>
        <div class="personaldetails_form">
            <el-form :label-position="left " label-width="100px" :model=" bannerDetail">
                <el-form-item label="名称">
                  <el-input v-model=" bannerDetail.name"></el-input>
                </el-form-item>
                <el-form-item label="活动人数">
                  <el-input v-model=" bannerDetail.capacity"></el-input>
                </el-form-item>
                <el-form-item label="活动地点">
                  <el-input v-model="bannerDetail.locate_name"></el-input>
                </el-form-item>
                <el-form-item label="详细地点">
                    <el-input v-model="bannerDetail.locate_detail"></el-input>
                </el-form-item>
                <el-form-item label="活动解释">
                    <el-input v-model="bannerDetail.introduction"></el-input>
                </el-form-item>
                <el-form-item label="活动收费">
                    <el-radio v-model="bannerDetail.charge" label="免费">免费</el-radio>
                    <el-radio v-model="bannerDetail.charge" label="收费">收费</el-radio>
                    <el-radio v-model="bannerDetail.charge" label="仅展示">仅展示</el-radio>
                </el-form-item>
                <el-form-item label="活动价格">
                    <el-input v-model="bannerDetail.charge_detail"></el-input>
                </el-form-item>
                <el-form-item label="活动须知">
                  <el-input v-model="bannerDetail.notes_for_application"></el-input>
              </el-form-item>
                <el-form-item label="报名时间">
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.apply_begin_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.apply_end_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.begin_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.end_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                      </el-col>
                  </el-form-item>
                <el-button size="mini" type="primary" @click="edit" class="button">编辑</el-button>
            </el-form>

          </div>
        </div>
        <div class="personaldetails_text_detail">
          <el-tag
          :key="tag"
          v-for="(tag,index) in tagsd"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tags[tag].name}}
          </el-tag>
          <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
    </div>
    <markdown @change="change" :text='introduction'></markdown>
  </div>
</template>

<script>
import {editAct,loadAct,editActTag,newTagI,loadAllTags} from "../../api/basisMG"
import markdown from "../../components/markdown"
import upload from "../../components/upload"
export default {
  data() {
    return {
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      tagsd:[],
      tags: [
          { name: '标签一', type: '' },
          { name: '标签二', type: 'success' },
          { name: '标签三', type: 'info' },
          { name: '标签四', type: 'warning' },
          { name: '标签五', type: 'danger' }
        ],
      new:{
        tag:""
      },
      tag:{
        actID:1,
        //用于存放旧的Tag
        deletedTag:[], 
        //用于更新新的Tag
        newTag:[],
      },      
      //用于修改活动的数据字段
      banner:{
        actID:-1,
        activity:{

        },
        image:[]
      },
      introduction:"",
      bannerDetail:{
          id:2,
          name:"",
          capacity:10,
          locate:"",
          locate_name:"",
          begin_time:"2020-10-1",
          end_time:"2020-10-7",
          apply_begin_time:"2020-10-1",
          apply_end_time:"2020-10-7",
          introduction:"",
          originator:"",
          charge:"",
          charge_detail:"",
          fatherID:0,
          need_apply:true,
          auto_return:null,
          finished:1,
          notes_for_application:"",
          tag:[],
          ParticipantsList:[
              {

              },
              {
                   
              }
          ]

      }
    }
  },
  // 注册组件
  components: {
    upload,
    markdown
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.bannerDetail = this.$route.query.bannerDetail
    this.introduction = this.bannerDetail.introduction
    console.log(this.bannerDetail.introduction)
    loadAllTags("parameter").then(res=>{
        console.log(res);
        this.tags = res.data
        this.getdata()
      })
    
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(this.tags[tag].id), 1);
        this.tagsd.splice(this.tagsd.indexOf(tag), 1);
        console.log(this.dynamicTags)
        this.tag.deletedTag.push(this.tags[tag].id)
        console.log(this.tag.deletedTag)
        this.editTag()
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleCommand(command) {
        this.handleInputConfirm()  
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        this.new.tag = inputValue
        var fd = new FormData();
        fd.append("tag",JSON.stringify(this.new.tag))
        console.log(inputValue)
        newTagI(fd)
        .then(res=>{
            console.log(res);
            loadAllTags(fd).then(res1=>{
                console.log(res1);
                this.tags = res1.data
                this.tag.newTag.push(res.data)
                this.dynamicTags.push(res.data)
                this.getTag1(res.data)
                this.editTag()
            })
        })

        this.inputVisible = false;
        this.inputValue = '';
      },
      editTag(){
        this.tag.actID = this.bannerDetail.id
        var fd = new FormData();
        fd.append("actID",this.tag.actID)
        fd.append("newTag",JSON.stringify(this.tag.newTag))
        fd.append("deletedTag",JSON.stringify(this.tag.deletedTag))
        console.log(this.tag.newTag);
        editActTag(fd)
        .then(res=>{
            console.log(res)
            this.tag.newTag = []
            this.tag.deletedTag = []
        })
    },
    getTag(){
      console.log(this.tags)
      console.log(this.dynamicTags)
      for(var i =0;i<this.tags.length;i++){
          for(var j=0;j<this.dynamicTags.length;j++){
              if(this.tags[i].id === this.dynamicTags[j]){
                    this.tagsd.push(i)
                    console.log(this.tagsd)
                }
          }
      }
    },
    getTag1(tagID){
      for(var i =0;i<this.tags.length;i++){
        if(this.tags[i].id === tagID){
          this.tagsd.push(i)
        }
      }
    },
    change(val) {
      this.bannerDetail.introduction = val
    },
    //获取初始化数据
    changeImg(val){
      this.bannerDetail.image = val
    },
    getdata(){
      this.banner.actID = this.bannerDetail.id
      loadAct(this.banner)
      .then(res=>{
        
        console.log(res)
        this.bannerDetail = res.data
        this.dynamicTags = res.data.tag
        this.getTag();
      })
    },
    //编辑轮播图
    edit(){
        var that = this;
        this.banner.activity = this.bannerDetail
        editAct(this.banner)
        .then(res=>{
            console.log(res);
            alert(res)
            that.$router.push({path:"/Activity/activityList"})
        })
    }
  }
}
</script>

<style scoped>
.button{
    margin-left: 90%;
}
.personaldetails{
    display: flex;
    float: left;
    width: 100%;
}
.personaldetails_text{
    width: 30%;
    margin-left: 5%;
}
.personaldetails_form{
    width: 50%;
    margin-left: 5%;
}
.personaldetails_text_detail{
    margin-top: 5%;
}

</style>

 
